<template>
  <div>
    <div>
      <el-steps :active="Number(1)" finish-status="success" simple style="margin-top: 20px">
        <el-step title="步骤 1" icon="el-icon-edit"></el-step>
        <el-step title="步骤 2" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>
    <div style="text-align: left; margin-top: 20px; margin-left: 60px;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类:">
          <el-select v-model="grandActive" placeholder="请选择" @change="handleGrandChange">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="(item,index) in fatherDropDown" :label="item.title" :value="item.id" :key="index"></el-option>
          </el-select>
          <el-select v-model="form.subjectId" placeholder="请选择" v-if="grandActive" @change="handleParentChange">
            <el-option v-for="(item,index) in childrenDropDown" :label="item.title" :value="item.id" :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程名称:" style="width: 300px;">
          <el-input v-model="form.title" placeholder="请输入课程名称"></el-input>
        </el-form-item>

        <el-form-item label="课程简介:" style="width: 550px">
          <el-input type="textarea"
                    :autosize="{ minRows: 8, maxRows: 8}"
                    v-model="formTow.introduce"></el-input>
        </el-form-item>

        <el-form-item label="是否付费:">
          <el-radio v-model="form.isFree" label="0">付费</el-radio>
          <el-radio v-model="form.isFree" label="1">免费</el-radio>
        </el-form-item>

        <el-form-item label="原价:" style="width: 300px;" v-if="this.form.isFree==0 || this.form.isFree==''">
          <el-input type="number" :min="0" v-model="form.courseOriginal" placeholder="请输入原价格"></el-input>
        </el-form-item>
        <el-form-item label="会员价:" style="width: 300px;" v-if="this.form.isFree==0 || this.form.isFree==''">
          <el-input type="number" :min="0" v-model="form.courseSvip" placeholder="请输入会员价格"></el-input>
        </el-form-item>

        <el-form-item label="上传封面">
          <el-col :span="6" class="tt">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8899/showdata/eduCourse/getPath"
              :on-success="handleAvatarSuccess">
              <img v-if="form.cover" :src="form.cover" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="6">
            <div style="text-align: left; line-height:18px;font-size: 12px" class="s1">
              * 图片尺寸为800px*800px，仅支持jpg、jpeg、png 格式，图片大小不超过2MB。
            </div>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="handleRedirect">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "addCourse",
    data() {
      return {
        fatherDropDown: [],
        childrenDropDown: [],
        grandActive: '',
        oneKey: '',
        twoKey: '',
        form: {
          subjectId: '',//课程分类
          title: '',//课程名称
          isFree: '1',//是否免费
          courseOriginal: '',//原始价格
          courseSvip: '',//会员价格
          cover: '',//封面路径
          lecturerId:'',//老师id
          version:'',//乐观锁(可能在秒杀是会用到)
          status:0,//课程状态，(0 未发布， 1 已发布)
          isDeleted:0,//逻辑删除(1,true 0 false)
          courseDiscount:0,//课程折扣
          countBuy:0,//购买人数
          countStudy:0,//学习人数
          peroidTotal:0,//总课时
          isPutaway:0,//是否上架(0,1)
          inid:'',//课程描述表的id，外键。
        },
        formTow: {
          introduce: '',//课程描述
        },
        userid:sessionStorage.getItem('uid'),//用户id
        ysq:'',
      }
    },
    created() {
      this.dropDown();
      this.getTeacherId();
    },
    methods: {
      dropDown() {
        this.$axios2.post("/showdata/eduSubject/findAll").then(res => {
          this.fatherDropDown = res.data;//获取全部课程类型 填充下拉框
        })
      },
      handleGrandChange(val) {
        //val是当前下拉框的 :value 属性的值
        //由于当前val是当前选项的属性的id 四个刚好分别是1 - 4，而该属性的下标是0 - 3，因此val-1刚好等于该属性下标
        this.childrenDropDown = this.fatherDropDown[val - 1].children;
        this.oneKey = val;
        this.form.subjectId = null;//父改变，子清空
      },
      handleParentChange(val) {
        this.twoKey = val;
      },
      handleAvatarSuccess(res, file) {
        this.form.cover = res;
      },
      getTeacherId(){
        this.$axios2.post("showdata/lecturer/findTidByUid/"+this.userid).then(res => {
          this.form.lecturerId=res.data[0].lecturerId;
        })
      },

      handleRedirect() {
        // 修改成功时要跳转至章节管理页
        if(this.form.courseOriginal>0 && this.form.courseSvip>0 ){
          this.$axios2.post("/showdata/courseIntroduce/addCourseIntroduce",qs.stringify(this.formTow)).then(res => {
            this.form.inid = res.data;
            console.log(JSON.stringify(this.form.inid));

            if (this.form.inid!=''){
              this.$axios2.post("/showdata/eduCourse/updateoradd",qs.stringify(this.form)).then(res => {
                console.log(JSON.stringify(this.form));
                // 提交成功后进行跳转
                this.$router.push({
                  path: "/addCourseTwo"
                });
              });
            }else {
              this.$message.error('申请失败，请重试！');
            }
          });
        }else {
          this.$message.error('请输入正确金额！');
        }
      },




      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadImg(file) {//文件上传操作
        console.log("uploadFile", file.file);
        let formData = new FormData();
        formData.append('file', file.file);
        console.log("formData", formData);
        lapi.uploadImg(formData).then(res => {
          if (res.code === 200) {
            console.log(JSON.stringify(res));
            this.form.cover = res.data;
          }
        })
      },

      onSubmit() {
        // 提交成功后要跳转至录播课程
        console.log(this.form);
      },

    }
  }
</script>

<style scoped>
  .ss {
    font-size: 12px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .s1 {
    width: 120px;
  }

  .tt {
    width: 120px;
  }
</style>
